<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
	<style type="text/css">
		.yy {
			position:relative;
			width: 610px;
			height: 600px;
			background-color: #F5F5DC;
		}
		.father {
			/* position: relative; */
			width: 400px;
			height: 500px;
			background-color: skyblue;
		}
		.son {
			position:absolute;
			top: 0;
			right: 0;
			width: 200px;
			height: 200px;
			background-color: pink;
		}

	</style>
</head>
<body>
    <!-- 
        定位: 将盒子定在某一个位置, 所以定位也是在摆放盒子, 按照定位的方式移动盒子.
        定位 = 定位模式 + 边偏移
        定位模式用于指定一个元素在文档的定位方式, 边偏移则决定了该元素的最终位置.

        定位模式
        通过设置position属性来定位
        值          语义
        static      静态定位
        relative    相对定位
        absolute    绝对定位
        fixed       固定定位  
        
        静态定位 static
        静态定位是元素的默认定位方式, 无定位的意思
        语法: 
            选择器 {position: static;}
        静态定位按照标准流特性摆放位置, 它没有偏移
        静态定位在布局时很少用到
 
        相对定位 relative
        相对定位是元素在移动位置的时候, 是相对于它原来的位置来说的
        语法:
            选择器 {position: relative}
        相对定位的特点: 
            1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
            2.原来在标准流的位置继续占有, 后面的盒子仍然以标准流的方式对待它(不脱标, 继续保留原来的位置)
		
		绝对定位absolute(重要)
			绝对定位是元素在移动位置的时候, 是相对于它祖先元素来说的(拼爹)
		语法:
			选择器 { position: ablsolute;}
		绝对定位的特点: (务必记住)
		1.如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位(Document文档)
		2.如果祖先元素有定位(相对, 绝对, 固定定位), 则以最近一级的有定位祖先元素为参考点移动位置
		3.绝对定位不再占有原来的位置.(脱标)
     -->
	<div class="yy">
		<div class="father">
			<div class="son"></div>						
		</div>
	</div>
	<!-- 
		使用定位的原则: 子绝父相
		1.子盒子绝对定位, 不会占有位置, 可以放到父盒子里面任何一个地方, 不会影响其他兄弟盒子
		2.父盒子需要加定位限制子盒子在父盒子内显示
		3.父盒子不能添加绝对定位, 绝对定位不占位置, 会导致下边的盒子上浮
		因此相对定位经常用来做绝对定位的父级
		总结: 因为父级需要占有位置, 因此是相对定位, 子盒子不需要占有位置, 则是绝对定位
	-->

</body>
</html>